<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		<div id="app">
			<h2>01、绑定监听</h2>
			<button @click="test1('john')">test1</button>
			<!--在有其他参数的时候，$event参数必须手动指定-->
			<button @click="test2('john',$event)">test2</button>
			<!--在没有任何参数的时候，$event是默认存在的参数-->
			<button @click="test3()">test3</button>
			<h2>02、事件修饰符</h2>
			<div style="width: 200px;height: 200px; background-color: red;" @click="test4">
				<!--@click.stop：表示，当点击内部的div时，可以阻止外出的div被点击，防止事件传递-->
				<div style="width: 100px;height:100px;background-color: blue;" @click.stop="test5"></div>
			</div><br />

			<!--阻止时间的默认行为，这里阻止跳转到百度-->
			<a href="http://www.baidu.com/" @click.prevent="test7">去百度？

				<h2>03、按键修饰符</h2>
				<!--当按下enter时执行test6的方法，13或者enter都代表回车按键-->
				<input type="text" @keyup.13="test6" />
				<input type="text" @keyup.enter="test6" />
		</div>
	</body>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script type="text/javascript">
		new Vue({
			el: "#app",
			methods: {
				test1(value) {
					alert(value)
				},
				test2(value, event) {
					alert(value + "--" + event.target.innerHTML)
				},
				test3() {
					alert(event.target.innerHTML)
				},
				test4() {
					alert("out")
				},
				test5() {
					alert("inner")
				},
				test6() {
					alert(event.target.value)
				},
				test7() {
					alert("去不了...")
				}
			}
		})
	</script>

</html>
